<template>
  <div class="overview-staff-wrapper">
    <div class="selectBox">
      <a-range-picker
        ref="date"
        :allowClear="false"
        class="datePicker"
        :placeholder="['开始月份', '结束月份']"
        format="YYYY-MM"
        :mode="mode"
        :value="value"
        @panelChange="handlePanelChange2"
      >
        <template slot="renderExtraFooter">
          <a-button key="submit" type="primary" style="margin-left:460px;" @click="dateOk">
            确定
          </a-button>
        </template>
      </a-range-picker>
      <a-select class="selectPicker" placeholder="请选择" @change="handleChange" default-value="1">
        <a-select-option value="1">
          总计
        </a-select-option>
        <a-select-option value="2">
          单位金额
        </a-select-option>
        <a-select-option value="3">
          个人金额
        </a-select-option>
      </a-select>
    </div>
    <total-count :dateBox="dateBox" :queryType="queryType" ref="totalCount" />
    <statistical :dateBox="dateBox" :queryType="queryType" ref="statistical" />
    <data-details :dateBox="dateBox" :queryType="queryType" ref="dataDetails" />
    <ginseng-details :dateBox="dateBox" :queryType="queryType" ref="ginsengDetails" />
  </div>
</template>

<script>
import moment from "moment";

export default {
  components: {
    totalCount: () => import("./components/totalCount"),
    statistical: () => import("./components/statistical"),
    dataDetails: () => import("./components/dataDetails"),
    ginsengDetails: () => import("./components/ginsengDetails")
  },

  created() {
    setTimeout(() => {
      this.handleChange("1"); // 点击一次时隔两秒后才能再次点击
    }, 200);
  },
  data() {
    return {
      mode: ["month", "month"],
      value: [`${moment().format("YYYY-MM")}`, `${moment().format("YYYY-MM")}`],
      startMonth: moment().format("MM"),
      endMonth: moment().format("MM"),
      startYear: moment().format("YYYY"),
      endYear: moment().format("YYYY"),
      dateBox: {
        startMonth: moment().format("MM"),
        endMonth: moment().format("MM"),
        startYear: moment().format("YYYY"),
        endYear: moment().format("YYYY"),
        step: -1
      },
      queryType: 1
    };
  },

  methods: {
    dateOk() {
      this.$refs.date.$refs.picker.sOpen = false;
    },
    handleChange(e) {
      this.queryType = parseInt(e);

      this.step = this.endYear - this.startYear - 1;

      this.dateBox = {
        startMonth: this.startMonth,
        endMonth: this.endMonth,
        startYear: this.startYear,
        endYear: this.endYear,
        step: this.step
      };
      console.log(this.queryType, this.step, this.dateBox, " this.queryType");
    },
    handlePanelChange2(value, mode) {
      this.value = value;
      this.startMonth = moment(value[0]).format("MM") ? moment(value[0]).format("MM") : moment().format("MM");
      this.startYear = moment(value[0]).format("YYYY") ? moment(value[0]).format("YYYY") : moment().format("YYYY");
      this.endMonth = moment(value[1]).format("MM") ? moment(value[1]).format("MM") : moment().format("MM");
      this.endYear = moment(value[1]).format("YYYY") ? moment(value[1]).format("YYYY") : moment().format("YYYY");
      this.step = this.endYear - this.startYear - 1;
      this.dateBox = {
        startMonth: this.startMonth,
        endMonth: this.endMonth,
        startYear: this.startYear,
        endYear: this.endYear,
        step: this.step
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.overview-staff-wrapper {
  // height: 1350px;
  background: #f1f1f1;
}
.selectBox {
  .datePicker {
    width: 238px;
  }
  .selectPicker {
    width: 120px;
    margin-left: 20px;
  }
}
</style>
